<template>
    <div class="jx-virtual-machine">
        <div class="jx-virtual-machine-header">
            <div class="jx-virtual-machine-header-logo fl">
                R语言与大数据处理技术
            </div>
            <div class="jx-virtual-machine-nav fl">
                <span class="fl active">实验手册</span>
                <span class="fl">实验笔记</span>
            </div>
            <div class="jx-virtual-machine-header-info fr">
                <span>虚拟机信息</span><i class="iconfont icon-wenti-m"></i>
            </div>
        </div>
        <div class="jx-virtual-machine-main">
            <div class="step-main-content fl">
                <div class="step-main-content-box">
                    <div class="step-main-btn-box">
                        <!-- <i class="fr"><img src="./../../../assets/images/zoom_icon.png" /></i> -->
                        <i class="iconfont icon-full-screen"></i>
                        <i class="iconfont icon-suoxiao"></i>
                    </div>
                    <mavonEditor style="min-height: 600px;" :toolbars="toolbars" ref="question"></mavonEditor>
                </div>
                <div class="step-main-btn-group">
                    <button @click="" class="button-style">保存</button>
                    <button @click="" class="button-style">下载</button>
                </div>
            </div>
            <div class="step-main-mirror">
                <div class="mirror-iframe">
                    <!-- <iframe :src="desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe> -->
                </div>
                <div class="step-main-mirror-dialog">
                    <div class="step-main-mirror-dialog-box">
                        <div class="mirror-dialog-header">
                            计时 <span>50:30</span>
                        </div>
                        <div class="mirror-dialog-item">
                            <div class="item-btn">
                                <i class="iconfont icon-shuaxin"></i>刷新
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-zhongxinshiyang"></i>初始化
                                <i class="iconfont icon-wenti-m"></i>
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-full-screen"></i>虚拟机全屏
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-baocun1"></i>镜像保存
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-peizhiguanli"></i>更改配置
                            </div>
                        </div>
                        <div class="mirror-dialog-item">
                            <div class="item-btn">
                                <i class="iconfont icon-upload"></i>SFTP工具
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-shangchuan-"></i>文件上传
                            </div>
                        </div>
                        <div class="mirror-dialog-item">
                            <div class="item-btn">
                                <i class="iconfont icon-jietu"></i>剪切板
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-tubiaozhizuo-"></i>下载文件
                            </div>
                        </div>
                        <div class="mirror-dialog-item">
                            <div class="item-btn">
                                <i class="iconfont icon-diaojiekongzhi2"></i>分享控制
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-fenxiang1"></i>分享桌面
                            </div>
                            <div class="item-btn">
                                <i class="iconfont icon-guanbifenxiang"></i>关闭分享
                            </div>
                        </div>
                    </div>
                    <div class="step-main-mirror-arrow">
                        <div>工具栏</div>
                    </div>
                    <div class="mirror-notes-box">
                        <div class="notes-select-bar" @click="">
                            <i class="iconfont icon-tongzhi"></i>
                            虚拟共享信息
                            <!-- <span v-if="notesData.length>0">{{notesData.length}}</span> -->
                        </div>
                        <div class="notes-content">
                            <div class="notes-content-close">
                                <i></i>
                            </div>
                            <div class="notes-content-list">
                                <!-- <div class="notes-item" v-for="(item, index) in notesData" @click="noteDialog(item.desktopUrl, item.controllable, index)">
                                    <span>{{ item.username }}</span>
                                    <i class="iconfont icon-link"></i>
                                </div> -->
                                <div class="notes-item">
                                    <span>小老弟</span>
                                    <i class="iconfont icon-link">x</i>
                                </div>
                                <div class="notes-item">
                                    <span>小老弟</span>
                                    <i class="iconfont icon-link">x</i>
                                </div>
                                <div class="notes-item">
                                    <span>小老弟</span>
                                    <i class="iconfont icon-link">x</i>
                                </div>
                                <div class="notes-item">
                                    <span>小老弟</span>
                                    <i class="iconfont icon-link">x</i>
                                </div><div class="notes-item">
                                    <span>小老弟</span>
                                    <i class="iconfont icon-link">x</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog  class="dialog-share" title="分享控制" :visible.sync="dialogShare" width="490px" center>
            <div class="dialog-content">
                <div class="share-item">
                    <span>开启学生之间虚拟机分享</span>
                    <!-- <span></span> -->
                    <el-switch
                        v-model="value1"
                        active-color="#13ce66"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </div>
                <div class="share-item">
                    <span>开启学生对教师虚拟机分享</span>
                    <!-- <span class="share-item-xian"></span> -->
                    <el-switch
                        v-model="value2"
                        active-color="#13ce66"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogShare = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    export default {
        components: { mavonEditor },
        data () {
            return {
                toolbars: {
                },
                //分享弹窗
                dialogShare: true,
                value1: false,
                value2: true
            }
        },
        created () {
            this.$nextTick(() => {
                $('.jx-virtual-machine').height($(window).height())
            })
        },
        methods: {

        }
    }
</script>


<style lang="scss" scoped>
    @import "./../../../styles/layout/color_variables";
    .jx-virtual-machine{
        position: relative;
        height: 100%;
    }
    .jx-virtual-machine-header{
        height: 60px;
        line-height: 60px;
        background: #101937;
        color: $white;
        .jx-virtual-machine-header-logo{
            margin-left: 40px;
            font-size: 16px;
        }
        .jx-virtual-machine-nav{
            margin: 20px 0 0 70px;
            float: left;
            height: 40px;
            line-height: 40px;
            span{
                width: 90px;
                color: $white;
                cursor: pointer;
                text-align: center;
                border-radius: 5px 5px 0 0;
                transition: .3s;
                // &:hover{
                //     background: $white;
                //     color: #101937;
                // }
                &.active{
                    background: $white;
                    color: #101937;
                }
            }
        }
        .jx-virtual-machine-header-info{
            margin-right: 40px;
            span{
                vertical-align: top;
            }
            i{
                margin-left: 12px;
                cursor: pointer;
            }
        }
    }
    .jx-virtual-machine-main{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        top: 60px;
        .step-main-content{
            width: 35%;
            height: 100%;
            overflow-x: auto;
            padding: 20px;
            box-sizing: border-box;
            .step-main-content-box{
                background: $white;
                border-radius: 5px;
                box-shadow: 2px 0 6px rgba(0,0,0,.05);
            }
            .step-main-btn-box{
                overflow: hidden;
                padding: 12px 16px 15px 15px;
                text-align: right;
                i{
                    color: #385899;
                    font-size: 16px;
                    line-height: 16px;
                    vertical-align: top;
                    cursor: pointer;
                }
            }
            .step-main-btn-group{
                text-align: center;
                margin-top: 20px;
                button{
                    width: 90px;
                    &:first-child{
                        // background: $btn-blue;
                        // color: #fff;
                        margin-right: 5px;
                    }
                }
            }
        }
        .step-main-mirror{
            width: 65%;
            height: 100%;
            overflow-x: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: #4d5368;
                border-radius: 6px;
            }
            .step-main-mirror-dialog{
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                width: 144px;
                padding: 0 25px;
                box-sizing: border-box;
                background: #2e2f33;

                .mirror-dialog-header{
                    font-size: 14px;
                    line-height: 18px;
                    color: $white;
                    padding: 20px 0;
                    span{
                        font-size: 18px;
                        line-height: 18px;
                        font-weight: 400;
                        vertical-align: bottom;
                    }
                }
                .mirror-dialog-item{
                    border-top: solid 1px rgba(255, 255,255, .3);
                    padding: 15px 0;
                    .item-btn{
                        line-height: 40px;
                        font-size: 14px;
                        color: $white;
                        overflow: hidden;
                        i{
                            // float: left;
                            width: 22px;
                            text-align: left;
                            // margin-right: 5px;
                            display: inline-block;
                            cursor: pointer;
                            &.icon-guanbifenxiang{
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
            .step-main-mirror-arrow{
                position: absolute;
                top: 20%;
                right: 144px;
                width: 22px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                background: #2e2f33;
                border-radius: 4px 0 0 4px;
                padding: 5px 0;
                cursor: pointer;
                transition: .2s;
                div{
                    color: #fff;
                    font-size: 14px;
                    width: 22px;
                    line-height: 26px;
                    // &:after{
                    //     content: '\003C';
                    // }
                    // &.active{
                    //     &:after{
                    //         content: '\003E';
                    //     }
                    // }
                }
            }
            .mirror-notes-box{
                position: fixed;
                width: 130px;
                // height: 200px;
                right: 0;
                bottom: 0;
                z-index: 999;
                .notes-select-bar{
                    position: absolute;
                    width: 100%;
                    bottom: 0;
                    height: 40px;
                    line-height: 40px;
                    color: $white;
                    background: #4d5368;
                    border-radius: 2px;
                    text-align: center;
                    cursor: pointer;
                    z-index: 10;
                    span{
                        font-size: 14px;
                        padding: 0 4px;
                        // width: 8px;
                        // height: 8px;
                        // display: inline-block;
                        background: #c82011;
                        border-radius: 8px;
                        color: $white;
                        -webkit-animation: fadenum 2s infinite;
                        -moz-animation: fadenum 2s infinite;
                        animation:fadenum 2s infinite;
                    }
                    @-webkit-keyframes fadenum {

                        /*设置内容由显示变为隐藏*/
                        0% {
                            opacity: 1;
                        }

                        50% {
                            opacity: 0;
                        }

                        100% {
                            opacity: 1;
                        }
                    }

                    @-moz-keyframes fadenum {

                        /*设置内容由显示变为隐藏*/
                        0% {
                            opacity: 1;
                        }

                        50% {
                            opacity: 0;
                        }

                        100% {
                            opacity: 1;
                        }
                    }

                    @-o-keyframes fadenum {

                        /*设置内容由显示变为隐藏*/
                        0% {
                            opacity: 1;
                        }

                        50% {
                            opacity: 0;
                        }

                        100% {
                            opacity: 1;
                        }
                    }

                    @keyframes fadenum {

                        /*设置内容由显示变为隐藏*/
                        0% {
                            opacity: 1;
                        }

                        50% {
                            opacity: 0;
                        }

                        100% {
                            opacity: 1;
                        }
                    }
                }
                .notes-content {
                    position: absolute;
                    width: 100%;
                    height: 172px;
                    background: #fff;
                    z-index: 8;
                    transition: .3s;
                    .notes-content-close{
                        height: 20px;
                        line-height: 20px;
                        i{
                            float: right;
                            width: 10px;
                            height: 2px;
                            background: #333333;
                            margin: 10px;
                            cursor: pointer;
                        }
                    }
                    .notes-content-list{
                        width: 100%;
                        height: 152px;
                        overflow-y: scroll;
                        &::-webkit-scrollbar {
                            width: 3px;
                        }

                        &::-webkit-scrollbar-thumb {
                            background: #5281c6
                        }
                        .notes-item{
                            width: 150px;
                            margin-left: 10px;
                            height: 30px;
                            line-height: 30px;
                            border-bottom: solid 1px #d0d0d0;
                            padding: 0 5px 0 10px;
                            overflow: hidden;
                            span{
                                float: left;
                                font-size: 12px;
                                color: #333333;
                            }
                            i{
                                float: right;
                                font-size: 12px;
                                color: #5281c6;
                            }
                        }
                    }
                }
            }
        }
    }
    .dialog-share{
        .button-style{
            width: 90px;
        }
        .dialog-content{
            .share-item{
                width: 280px;
                height: 28px;
                line-height: 28px;
                margin: 0 auto;
                text-align: center;
                font-size: 14px;
                color: #474747;
                margin-top: 20px;
                span{
                    float: left;
                    width: 210px;
                    border-right: solid 1px #e8e8e8;
                    padding-right: 38px;
                    text-align: right;
                    box-sizing: border-box;
                }
                .el-switch{
                    float: left;
                    margin: 4px 0 0 30px;
                }
            }
        }
    }
</style>

